<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案件ID接口集成测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .test-container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .test-section {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #e8e8e8;
            border-radius: 6px;
        }
        .test-title {
            color: #1890ff;
            margin-bottom: 10px;
            font-weight: bold;
        }
        .test-item {
            margin: 10px 0;
            padding: 8px;
            background: #f9f9f9;
            border-radius: 4px;
        }
        .status {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }
        .status.completed {
            background: #f6ffed;
            color: #52c41a;
            border: 1px solid #b7eb8f;
        }
        .status.new {
            background: #fff7e6;
            color: #fa8c16;
            border: 1px solid #ffd591;
        }
        .code-block {
            background: #f5f5f5;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            padding: 10px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            margin: 10px 0;
            overflow-x: auto;
        }
        .highlight {
            background: #fff7e6;
            padding: 2px 4px;
            border-radius: 2px;
        }
        .api-example {
            background: #f0f9ff;
            border: 1px solid #bae6fd;
            border-radius: 6px;
            padding: 12px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>🆔 案件ID接口集成测试</h1>
        
        <div class="test-section">
            <div class="test-title">🎯 实现目标</div>
            <div class="test-item">
                <span class="status new">🆕 新功能</span>
                <strong>创建案件ID接口定义</strong> - 在API文件中定义获取案件ID接口
            </div>
            <div class="test-item">
                <span class="status new">🆕 新功能</span>
                <strong>录案表单id参数</strong> - 在录案提交表单中新增id参数
            </div>
            <div class="test-item">
                <span class="status new">🆕 新功能</span>
                <strong>自动获取案件ID</strong> - 打开录案弹框时自动获取案件ID
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">🔧 1. 创建案件ID接口定义</div>
            <div class="api-example">
                <strong>接口信息：</strong>
                <ul>
                    <li><strong>地址：</strong> qtong/anon/id/get</li>
                    <li><strong>类型：</strong> POST</li>
                    <li><strong>参数：</strong> {"tsToken":"77319058c1784566ac594eea4422354e"}</li>
                    <li><strong>响应：</strong> {"code":"200","success":true,"message":"操作成功!","result":"1967507717942775810"}</li>
                </ul>
            </div>
            <div class="test-item">
                <strong>接口类型定义：</strong>
                <div class="code-block">
// 14. 创建案件ID接口
export interface GetCaseIdParams {
  tsToken: string;
}

export interface GetCaseIdResult {
  code: string;
  success: boolean;
  message: string;
  result: string;
}

export const getCaseId = (params: GetCaseIdParams): Promise&lt;ApiResponse&lt;GetCaseIdResult&gt;&gt; => {
  return request.post(`${CONFIG.baseURL}/qtong/anon/id/get`, params);
};
                </div>
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">🔧 2. 录案表单id参数</div>
            <div class="test-item">
                <strong>表单数据结构更新：</strong>
                <div class="code-block">
const recordCaseForm = ref({
  id: '', // 新增案件ID字段
  channelId: undefined,
  productId: undefined,
  delegateDate: dayjs(),
  recallDate: dayjs().add(1, 'month').subtract(1, 'day'),
  memo: '',
  bizChannelName: ''
});
                </div>
            </div>
            <div class="test-item">
                <strong>重置表单时清空id：</strong>
                <div class="code-block">
const resetForm = () => {
  recordCaseForm.value = {
    id: '', // 重置时清空案件ID
    channelId: undefined,
    productId: undefined,
    // ... 其他字段
  };
};
                </div>
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">🔧 3. 自动获取案件ID</div>
            <div class="test-item">
                <strong>获取案件ID函数：</strong>
                <div class="code-block">
const fetchCaseId = async () => {
  try {
    const result = await getCaseId({ 
      tsToken: userStore.tsToken || '' 
    });
    if (result.success && result.result) {
      recordCaseForm.value.id = result.result;
      console.log('获取案件ID成功:', result.result);
    } else {
      message.error('获取案件ID失败');
    }
  } catch (error) {
    console.error('获取案件ID失败:', error);
    message.error('获取案件ID失败');
  }
};
                </div>
            </div>
            <div class="test-item">
                <strong>打开弹框时获取案件ID：</strong>
                <div class="code-block">
const handleAddRecordCase = () => {
  addRecordCaseModalVisible.value = true;
  fetchCaseId(); // 获取案件ID
  fetchChannelList();
};
                </div>
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">🔧 4. 提交参数包含id</div>
            <div class="test-item">
                <strong>提交参数更新：</strong>
                <div class="code-block">
const submitParams: SaveRecordCaseParams = {
  id: recordCaseForm.value.id, // 案件ID
  bizChannel: recordCaseForm.value.channelId as string,
  productTypeName: selectedProduct.productName,
  delegateDate: dayjs(recordCaseForm.value.delegateDate).toISOString(),
  recallDate: dayjs(recordCaseForm.value.recallDate).toISOString(),
  memo: recordCaseForm.value.memo || '',
  bizChannelName: recordCaseForm.value.bizChannelName || '',
  tsToken: userStore.tsToken || ''
};
                </div>
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">✅ 实现效果</div>
            <div class="test-item">
                <span class="status completed">✅ 完成</span>
                <strong>接口定义</strong> - 创建案件ID接口已定义并导出
            </div>
            <div class="test-item">
                <span class="status completed">✅ 完成</span>
                <strong>表单参数</strong> - 录案表单已添加id字段
            </div>
            <div class="test-item">
                <span class="status completed">✅ 完成</span>
                <strong>自动获取</strong> - 打开弹框时自动获取案件ID
            </div>
            <div class="test-item">
                <span class="status completed">✅ 完成</span>
                <strong>提交集成</strong> - 提交参数包含案件ID
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">🧪 测试步骤</div>
            <div class="test-item">
                1. 访问录案页面 <code>http://localhost:5174/record-case</code>
            </div>
            <div class="test-item">
                2. 点击"新增录案"按钮打开弹框
            </div>
            <div class="test-item">
                3. 检查控制台是否显示"获取案件ID成功"日志
            </div>
            <div class="test-item">
                4. 填写表单信息（渠道、产品、日期、备注）
            </div>
            <div class="test-item">
                5. 上传Excel文件
            </div>
            <div class="test-item">
                6. 点击"提交"按钮
            </div>
            <div class="test-item">
                7. 检查控制台提交参数是否包含id字段
            </div>
            <div class="test-item">
                8. 验证录案提交成功
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">🔍 技术细节</div>
            <div class="test-item">
                <strong>案件ID获取时机：</strong>
                <ul>
                    <li>每次打开录案弹框时获取新的案件ID</li>
                    <li>确保每个录案都有唯一的ID</li>
                    <li>获取失败时显示错误提示</li>
                </ul>
            </div>
            <div class="test-item">
                <strong>ID传递流程：</strong>
                <ol>
                    <li>用户点击"新增录案"按钮</li>
                    <li>调用 <span class="highlight">fetchCaseId()</span> 获取案件ID</li>
                    <li>将ID存储到 <span class="highlight">recordCaseForm.value.id</span></li>
                    <li>提交时包含在 <span class="highlight">submitParams</span> 中</li>
                </ol>
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">⚠️ 注意事项</div>
            <div class="test-item">
                • 案件ID是必填字段，获取失败时不能提交
            </div>
            <div class="test-item">
                • 每次打开弹框都会获取新的案件ID
            </div>
            <div class="test-item">
                • 案件ID格式为字符串类型的长数字
            </div>
            <div class="test-item">
                • 需要有效的tsToken才能获取案件ID
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">🎯 预期结果</div>
            <div class="test-item">
                <span class="status completed">✅ 完成</span>
                <strong>接口集成</strong> - 案件ID接口正常工作
            </div>
            <div class="test-item">
                <span class="status completed">✅ 完成</span>
                <strong>表单更新</strong> - 录案表单包含id参数
            </div>
            <div class="test-item">
                <span class="status completed">✅ 完成</span>
                <strong>自动获取</strong> - 打开弹框时自动获取案件ID
            </div>
            <div class="test-item">
                <span class="status completed">✅ 完成</span>
                <strong>提交流程</strong> - 提交参数包含案件ID
            </div>
        </div>
    </div>
</body>
</html>
